Page Layout Component

IN THIS PAGE

Page Layout Component Guides
Creating a Page Layout using the Page Layout Builder
Videos

Description

The Page Layout Builder allows you to create a web page that contains multiple components. Components can be placed in tabs, accordions, displayed in popup windows, or shown in-page.

Discussion

The Page Layout Builder allows you to build a complex layout that can contain Grid components, UX components, Reports, embedded .a5w pages, web pages, and other HTML content.

The Page Layout allows you to lay out the components any way you want (for example, one component on the left, next component on the right, or components one after another).

You can also add Tab and Accordion controls to the Page Layout component to control the visibility of the various Grid and UX components in the Page Layout component.

The Page Layout component offers a subset of the features available in the UX component. You may therefore want to use the UX component instead of the Page Layout component.

The UX component allows you to embed child components (using the [Embedded Object] control in the Other Controls section of the UX toolbox.) The UX component is also used to build mobile applications.

Page Layout Component Guides

Name: Description
Using Show/Hide Expressions in a Page Layout: Show/hide expressions can be used to dynamically display content in a Page Layout Component.
Using Arguments to Filter Records in a Page Layout: Arguments can be defined for a Page Layout Component which can be used in server-side show/hide expressions as well as filtering Grid Components and Reports.
Animating Tab and Accordion Controls in a Page Layout Component: Tab and accordion controls in the Page Layout Component can be configured to include animations when opening or closing a tab or accordion pane.
Providing Multiple Language Support in a Page Layout: Multilingual support can be added to the Page Layout Component using Text Dictionary tags and language definitions.
Page Layout Component Properties: The Page Layout Component properties can be used to configure it's behavior and how it is displayed.
Page Layout Control Properties: Properties for controls in a Page Layout Component.
Page Layout Builder: An introduction to the Page Layout Builder.

Creating a Page Layout using the Page Layout Builder

The Page Layout Builder is used to design a Page Layout. The content in the Page Layout can be displayed in Tab, Accordion, Frame and Container controls.

If content is placed in a Tab or Accordion control, any content that is not on the pane that is shown when the page is first visited will not be loaded until the pane the content is on becomes visible. When the visible Tab or Accordion pane changes, an Ajax callback is made to the Alpha Anywhere Application Server to fetch the content. By only loading content when it is needed, the page can load quickly yet still contain any number of components and Reports.

The 'flow' of content in a Page Layout is from left to right.

The objects placed in a page can be shown immediately when the page is loaded or when an explicit request is made, such as clicking a button.

To get started creating your first Page Layout component:

Select the Page Layout Parts pane.
Open the Page Layout Parts section toolbox.
Add objects (Grids, Reports, .a5w pages, HTML pages, External web pages and PDF documents.) Each object can be displayed on the page when loaded or after the user clicks a button or hyperlink.
You can control the layout of the objects on the Page Layout component using controls such as Tab, Accordion, and Containers. These controls are found in the Containers section of the toolbox. Objects can be organized into Tabs and Accordions. Frames and Containers can be added to group objects together.
Controls for organizing content can be found in the "Container" toolbox.
Additional content such as static text, images, buttons, hyperlinks, etc can also be added to the page. These controls are found in the Other controls section of the toolbox.
Other controls, such as static text and images, are found in the "Other Controls" toolbox.
Select the Page Layout Properties section to define other settings for the Page Layout component.
See Page Layout Properties for more information.
Use the Live Preview and Working Preview tabs to test the Page Layout component during development. Live and Working Preview allow you test buttons, hyperlinks, and any actions you have added to the page as well as preview the Page Layout component's styling and layout prior to publishing.
To learn more about Live and Working Preview, see Previewing Components.
When you are done, place the component in an .a5w page. This can be done by either clicking the Save Page button on the Page Layout Builder toolbar or creating a new .a5w page and using the Insert Component button in the HTML Editor toolbar for the .a5w page.
Save Page
Insert Component
See Building A5W Web Pages for more information about creating an .a5w page.
Publish the Page Layout component and the .a5w page locally or to a remote server to view it in a browser.

Videos

Page Layout Builder

Learn how to create a web application using the Page Layout Component in this two-part video series. These videos demonstrate the Page Layout Component.